<template>
  <van-tabs
    swipeable
    animated
    :active="currentTab"
    @change="onChange"
    class="enroll-tabs"
  >
    <van-tab
      :title="tab.title"
      :name="tab.name"
      v-for="(tab,key) in tabs"
      :key="key"
    >
      <scroll-view
        class="scroll-container"
        v-if="tab.list.length>0"
      >
        <van-cell-group
          @click="onClick"
          :custom-class="['van-cell-group-radius enroll-item',item.statusClass]"
          :border="false"
          v-for="(item, index) in tab.list"
          :key="index"
        >
          <van-cell
            :icon="item.match.thumb"
            :title="item.match.name"
            :border="false"
            custom-class="enroll-item-head"
            v-if="item.match"
          >
            <view>未支付</view>
          </van-cell>
          <van-cell
            custom-class="enroll-item-body"
            :border="false"
            v-if="item.match"
          >
            <view slot="title">
              <view>报名项目：{{item.matchItem.name}}</view>
              <view>比赛时间：{{item.match.begintime}}</view>
              <view>比赛地点：{{item.match.host_place}}</view>
            </view>
            <price :value="item.cost" />
          </van-cell>
          <van-cell
            title="支付倒计时：01:29:49"
            class="enroll-item-foot"
            :border="false"
            center
          >
            <van-button
              size="small"
              round
              plain
            >取消</van-button>
            <van-button
              size="small"
              type="danger"
              round
              @click.stop="onPay"
            >支付</van-button>
          </van-cell>
        </van-cell-group>
      </scroll-view>
      <blank
        v-else
        :value="showEmpty"
        :title="empty.title"
        :message="empty.message"
        :button="empty.button"
        :icon="empty.icon"
      />
    </van-tab>
  </van-tabs>
</template>

<script>
import Price from '@/components/price'
import PanelEnroll from '@/components/panel/enroll'
import { getEnrollList } from '@/api'
import Blank from '@/components/blank'
export default {
  components: {
    Price,
    Blank,
    PanelEnroll
  },

  data () {
    return {
      tabs: [
        {
          name: 'all',
          title: '全部',
          list: [],
          page: 1, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          name: 'pay',
          title: '待付款',
          list: [],
          page: 1, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          name: 'entry',
          title: '待参赛',
          list: [],
          page: 1, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          name: 'assess',
          title: '待评价',
          list: [],
          page: 1, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        }
      ],
      currentTab: 'all',
      showEmpty: true,
      empty: {
        title: '您未办理本赛季年票',
        message: '年票发售活动会在票务中心公布展示',
        button: {
          link: null,
          text: '去看看'
        }
      }
    }
  },
  beforeMount () {
    this.onLoadTabList()
  },
  watch: {
    currentTab (value) {
      this.onLoadTabList(value)
    }
  },
  methods: {
    onChange (e) {
      this.currentTab = e.mp.detail.name
    },
    onClickViewEvent () {
      wx.navigateTo({
        url: '/pages/match/main?name=曹天骄&sex=男'
      })
      console.log('enlist onClickViewEvent')
    },
    onPay () {
      console.log('enlist onPay')
    },
    onClick () {
      // wx.navigateTo({
      //   url: '/pages/match/main?name=曹天骄&sex=男'
      // })
      console.log('enlist onClick')
    },
    // 获取数据方法
    getList (index) {
      console.log('enlist getList:', index)
      let that = this.tabs[index]
      if (!that) {
        return
      }
      let params = {
        type: that.name,
        page: that.page
      }
      getEnrollList(params).then(res => {
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res.data

        let itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            this.tabs[index].list.push(...data.items)
          } else {
            this.tabs[index].list = data.items
          }
        }
        this.tabs[index].meta = data.meta
      })
    },
    onLoadTabList () {
      for (let i = this.tabs.length; i--;) {
        if (this.tabs[i].name === this.currentTab) {
          if (this.tabs[i].list.length === 0) {
            this.getList(i)
          }
          break
        }
      }
    }
  },
  // 上拉加载
  onReachBottom: function () {
    for (let i = this.tabs.length; i--;) {
      if (this.tabs[i].name === this.currentTab) {
        let activeTab = this.tabs[i]
        // 执行上拉执行的功能
        if (activeTab.meta.pageCount <= activeTab.meta.currentPage) {
          console.log('数据加载完了')
        } else {
          this.tabs[i].page += 1
          // 下一页
          this.getList(i)
        }
        break
      }
    }
  },
  // 停止下拉刷新
  async onPullDownRefresh () {
    for (let i = this.tabs.length; i--;) {
      if (this.tabs[i].name === this.currentTab) {
        this.tabs[i].page = 1
        // 初始化页码
        this.getList(i)
        break
      }
    }
    console.log('下拉刷新')
    // to doing..
    // 停止下拉刷新
    wx.stopPullDownRefresh()
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.event-container {
  padding-top: 60px;
  position: relative;
  background: #f1f2f3;
  min-height: 100vh;
}
.scroll-container {
  padding: 10px;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.event-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.enroll-item {
  margin-bottom: 15px;
  .van-cell {
    padding: 10px;
    &__title {
      font-size: 12px;
    }
    &__value {
      font-size: 12px;
      flex: none;
      margin-left: 10px;
    }
  }
  ._van-cell + ._van-cell .van-cell {
    padding-left: 40px;
  }

  &-head.van-cell {
    .van-cell__title {
      font-size: 16px;
      font-weight: bold;
    }
    .van-cell__left-icon-wrap {
      align-items: flex-start;
      font-size: 20px;
      margin-right: 10px;
      .van-icon__image {
        margin-top: 3px;
        border-radius: 3px;
      }
    }
    .van-cell__value {
      font-size: 16px;
    }
  }
  &-body {
    .price {
      font-size: 10px;
    }
  }
  &-foot {
    .van-cell__value {
      ._van-button + ._van-button .van-button {
        margin-left: 5px;
      }
    }
  }

  &.enroll-cancel {
    .van-cell {
      color: #ccc;
      &__value {
        color: #ccc;
      }
      .van-icon__image {
        filter: grayscale(100%);
      }
    }
  }
}
.enroll-tabs {
  .van-tabs {
    height: 100%;
    padding-top: 44px;
    background: #f1f2f3;
    .van-sticky {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
    &__content {
      min-height: 100%;
      background: #f1f2f3;
    }
  }
  .van-tab__pane {
    .empty {
      position: relative;
      background: transparent;
    }
  }
}
</style>
